<template>
	<div class="firstDiv">
		<div class="container">
			<div>
				<PageTop></PageTop>
				<div class="navigation_bar ">
					<ul class="nav nav-tabs nav-justified">
						<li class="nav-item"><a class="nav-link active" href="/#/home">首页</a></li>
						<li class="nav-item"><a class="nav-link" href="/#/mnzy">模拟填志愿</a></li>
						<li class="nav-item"><a class="nav-link" href="/#/schoolQuery">查学校</a></li>
						<li class="nav-item"><a class="nav-link" href="/#/major" >查专业</a></li>
						<!-- <li class="nav-item"><a class="nav-link" href="/">智能选大学</a></li> -->
						<li class="nav-item"><a class="nav-link" href="/#/echarts">高考大数据</a></li>
						<li class="nav-item"><a class="nav-link" href="/#/chat">在线答疑</a></li>
					</ul>
				</div>
			</div>

			<div id="home-page">
				<div class="onepage" id="onepage">
					<el-carousel indicator-position="outside" height="450px">
						<el-carousel-item v-for="item in imagebox" :key="item.id">
							<img :src="item.idView" class="image">
						</el-carousel-item>
					</el-carousel>

				</div>


				<div class="threepage row">
					<video src="../../assets/video.mp4" style="border-radius: 15px;width: 50%;"
						type="video/mp4" Controls loop muted></video>
					<News class="d-none d-md-block"></News>
				</div>

				<div class="twopage">
					<card></card>
				</div>


				<div class="fourpage">
					<div class="page-title">
						<h3>| 在线答疑</h3>
					</div>
					<div class="bing_robot row">
						<div class="col-1"></div>
						<div class="chatRobot col-7" style="padding: 30px;" id="words-box">
							<h4 style="margin-top: 100px;">智能聊天机器人帮您解决疑问！</h4>
						</div>
						<div class="col-4 d-none d-lg-block" style="margin-left: 230px;">
							<el-popover placement="right" title="Hi! 我是小冰" :width="180" trigger="hover"
								content="您有需要咨询的问题嘛？快来问我吧!">
								<template #reference>
									<a href="/#/chat">
										<img src="../../assets/小冰.png" style="width: 280px;" />
									</a>
								</template>
							</el-popover>
						</div>
					</div>
					<div class="consult row" style="margin-top: 30px;">
						<div class="col-6 d-none d-lg-block" style="margin-left: 20px;">
							<img src="../../assets/consult.jpg" style="border-radius: 15px; width: 400px;" />
						</div>

						<div class="col-5 d-none d-lg-block" id="words-box">
							<h4 style="margin-top: 100px;">遇事不决，我们还有咨询师为您在线答疑！</h4>
						</div>
					</div>

				</div>

				<div class="fivepage">
					<div class="page-title">
						<h3>| 校园风光</h3>
					</div>
					<campusScenery></campusScenery>


				</div>
			</div>

			<div class="page-bottom">
				<PageBottom></PageBottom>
			</div>

		</div>
	</div>
</template>

<script>
	import PageTop from '../../components/basic/PageTop.vue'
	import PageBottom from '../../components/basic/PageBottom.vue'
	import Card from '../../components/home/dynamicCard.vue'
	import News from '../../components/home/news.vue'
	import campusScenery from '../../components/home/campusScenery.vue'

	export default {
		name: 'Home',
		data() {
			return {
				imagebox: [{
						id: 0,
						idView: require('../../assets/carousel1.png')
					},
					{
						id: 1,
						idView: require('../../assets/carousel2.png')
					},
					{
						id: 2,
						idView: require('../../assets/carousel3.png')
					}
				],

				// 浏览器宽度
				screenWidth: 0,

			}
		},
		methods: {
			setSize: function() {
				// 通过浏览器宽度(图片宽度)计算高度
				this.bannerHeight = 400 / 1920 * this.screenWidth;
			},
		},
		created() {

		},
		components: {
			PageTop,
			PageBottom,
			Card,
			News,
			campusScenery
		},
		mounted() {
			layui.use('element', function() {
				var element = layui.element
			});
		}
	}
</script>

<style scoped>
	.firstDiv {
		background-image: url(../../assets/backimg5.png);
	}

	.container {
		width: 100%;
		height: 100%;
	}

	#home-page {
		/* background-color: #E6F1FE; */
		background-image: url(../../assets/backimg5.png);
		border-radius: 30px;
	}

	.navigation_bar {
		margin-top: 20px;
	}


	.navigation_bar ul.nav>li>a {
		color: #000000;
		font-size: 17px;
		font-weight: 560;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}



	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.page-title {
		margin-left: 20px;
		margin-top: 40px;
	}

	#words-box {
		/* background-color: #00B3EE; */
		background-image: url(../../assets/backimg3.png);
		background-size: cover;
		background-attachment: fixed;
		color: white;
		border-radius: 15px;
		height: auto;
		width: 400px;
		height: 300px;
		text-align: center;
		margin-top: 40px;
	}

	.onepage img {
		/*设置图片宽度和浏览器宽度一致*/
		width: 100%;
		height: inherit;
	}

	.onepage {
		margin-top: 20px;
	}

	.twopage {
		padding: 2px 0 0 2px;
		height: auto;
		margin-top: 40px;
	}

	.threepage {
		margin-top: 40px;
	}

	.fourpage {
		margin-top: 40px;
	}

	.fivepage {
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.campus_scenery {
		margin-top: 30px;
	}

	.campus_scenery img{
		border-radius: 10px;
	}

</style>
